<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>hello</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/clappr@latest/dist/clappr.min.js"></script>


    <link href="/lib/video-js.css" rel="stylesheet"/>
    <script src="/lib/video.js" type="text/javascript"></script>

    <!-- <link href="http://vjs.zencdn.net/vjs-version/video-js.css" rel="stylesheet"> -->

    <!--<link type="text/css" rel="stylesheet" href="http://vjs.zencdn.net/5.4.4/video-js.css"/>-->
    <!--<script src="http://vjs.zencdn.net/5.4.4/video.js"></script>-->


    <script src="/lib/jquery-2.1.4.min.js"></script>


<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="/lib/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="/lib/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="/lib/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<link rel="stylesheet"
  href="/lib/animate.min.css">


    <style type="text/css">
  #overlay {
      position: absolute;
      bottom: 30px;
      width:100%;
      text-align: center;
      font-size: 20px;
      z-index: 2147483647;
    }

#overlayStat {
    position: absolute;
    top: 0px;
    color: white;
    width:100%;
    text-align: left;
    font-size: 20px;
    background-color: rgba(221, 221, 221, 0.3);
    z-index: 2147483647;
}

  #overlayCountdown {
      position: absolute;
      right: 30px;
      bottom:30px;
      width:100%;
      text-align: right;
      font-size: 50px;
      z-index: 2147483649;
  }
    
.vjs-default-skin.vjs-paused .vjs-big-play-button
{
    display: none;
}
.text-emotion{
    padding-top:3pt;
    font-size:20pt;
    color:white;
}
.img-emotion{
    width:100pt;
}
.div-emotion{
    padding: 20pt;
}
    </style>



</head>
<body style="background-color: gray">

<br/>

<div id="home" class="container">
    <div class="row" >
    <div class="col-xs-12 text-center">
        <h1 style="color:white">情绪感应</h1>
        <br/>
    </div>
    </div>
    <div class="row" >
    <div class="col-xs-12">
        <video
            id="video"
            class="video-js vjs-default-skin center-block"
            controls
            width="800" height="500"
            data-setup='{ }'

        >
        </video>

        <!--poster="http://vjs.zencdn.net/v/oceans.png"-->
        
    </div>
    </div>
    <div class="row" >
        <div class="col-xs-4"></div>
    <div class="col-xs-4">
        <br/>
        <button id="startButton" class="btn btn-primary btn-block" style="height:50px;font-size:25px;">开 始
            </button>
    </div>
        <div class="col-xs-4"></div>
    </div>
</div>


<div id="overlayStat" class="container">

</div>


<div id="overlayCountdown" class="container"   >

    <div class="row" >

        <div class="col-xs-8">

        </div>
        <div class="col-xs-4 text-right">
            <div id="textCountdown" style = "font-size:30px;color:white;" hidden></div>
        </div>
    </div>


</div>


  <div id="overlay" class="container"   >

      <div class="row" >
          <div class="col-xs-2 div-emotion">
                <div id="div1" hidden>
                    <img id="img1" class="img-circle img-responsive"/>
                    <div id="text1" class="text-emotion text-center"></div>
                </div>
          </div>
          <div class="col-xs-2 div-emotion">
                <div id="div2" hidden>
                    <img id="img2" class="img-circle img-responsive"/>
                    <div id="text2" class="text-emotion text-center"></div>
                </div>
          </div>
          <div class="col-xs-2 div-emotion">
              <div id="div3" hidden>
                  <img id="img3" class="img-circle img-responsive"/>
                  <div id="text3" class="text-emotion text-center"></div>
              </div>
          </div>
          <div class="col-xs-2 div-emotion">
              <div id="div4" hidden>
                  <img id="img4" class="img-circle img-responsive"/>
                  <div id="text4" class="text-emotion text-center"></div>
              </div>
          </div>
          <div class="col-xs-2 div-emotion">
              <div id="div5" hidden>
                  <img id="img5" class="img-circle img-responsive"/>
                  <div id="text5" class="text-emotion text-center"></div>
              </div>
          </div>
          <div class="col-xs-2">
              <div id="div6" hidden>
                  <img id="img6" class="img-circle img-responsive"/>
                  <div id="text6" class="text-emotion text-center"></div>
              </div>
          </div>
      </div>


  </div>





<script>

var myPlayer;
var defaultVideo = 'http://7jpsky.com1.z0.glb.clouddn.com/%E7%AC%AC7%E9%9B%86_hd.mp4';

function initPath(){
    $.post("/path", function(data) {

    });
}
initPath();

function faceDetect(){

    $.post("/face", function(data) {

        $('#textCountdown').hide();
        console.log(data);

        var stat = "惊讶 " + data.stat.surprise +
            "   高兴 " + data.stat.happiness +
            "   平静 " + data.stat.neutral +
            "   伤心 " + data.stat.sadness +
            "   厌恶 " + data.stat.disgust +
            "   生气 " + data.stat.anger +
            "   惊恐 " + data.stat.fear;
        $('#overlayStat').text(stat);

        $('#div1').hide();
        $('#div2').hide();
        $('#div3').hide();
        $('#div4').hide();
        $('#div5').hide();


        var faces = data.result.faces;
        if(faces.length == 0){
            countdown();
        }
        else if(faces.length > 0)
        {
            var current_surprise_count = 0;
            var current_happiness_count = 0;
            var current_neutral_count = 0;
            var current_sadness_count = 0;
            var current_disgust_count = 0;
            var current_anger_count = 0;
            var current_fear_count = 0;

            var faceCount = faces.length > 6 ? 6 : faces.length;
            for(var i = 0; i < faceCount; ++i){
                $('#img' + (i+1)).attr('src',"/photo/" + faces[i].face_photo);

                var emotion = faces[i].attributes.emotion;
                if(emotion.surprise > 60){
                    $('#text' + (i+1)).text("惊讶");
                    current_surprise_count += 1;
                }
                else if(emotion.happiness > 60){
                    $('#text' + (i+1)).text("高兴");
                    current_happiness_count += 1;
                }
                else if(emotion.neutral > 60){
                    $('#text' + (i+1)).text("平静");
                    current_neutral_count += 1;
                }
                else if(emotion.sadness > 60){
                    $('#text' + (i+1)).text("伤心");
                    current_sadness_count += 1;
                }
                else if(emotion.disgust > 60){
                    $('#text' + (i+1)).text("厌恶");
                    current_disgust_count += 1;
                }
                else if(emotion.anger > 60){
                    $('#text' + (i+1)).text("生气");
                    current_anger_count += 1;
                }
                else if(emotion.fear > 60){
                    $('#text' + (i+1)).innerHTML = "惊恐";
                    current_fear_count += 1;
                }else{
                    $('#text' + (i+1)).text("平静");
                    current_neutral_count += 1;
                }

                $('#div' + (i+1)).show();

                $('#div' + (i+1)).removeClass('animated fadeOutLeft');
                $('#div' + (i+1)).addClass('animated fadeInLeft');
            }

            setTimeout(function (){
                if(this.faceCount > 0){
                    for(var i = 0; i < faceCount; ++i){
                        $('#div' + (i+1)).removeClass('animated fadeInLeft');
                        $('#div' + (i+1)).addClass('animated fadeOutLeft');
                    }

//                    $('#div1').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function (){
//                        $('#div1').hide();
//                    });

                }
            }.bind({faceCount:faceCount}),5000);


            if(current_neutral_count >= 1){
                myPlayer.src({
                    type: 'video/mp4',
                    src: 'http://7jpsky.com1.z0.glb.clouddn.com/%E7%AC%AC7%E9%9B%86_hd.mp4'//http://localhost:8080/video/1.mp4'
                });
                myPlayer.play();
                myPlayer.enterFullScreen();
            }
            else if(current_happiness_count >= 1){
                myPlayer.src({
                    type: 'video/mp4',
                    src: 'http://p29o6sceb.bkt.clouddn.com/108.mp4'
                });
                myPlayer.play();
                myPlayer.enterFullScreen();
            }

        }
    });
}

function countdown(){

    var countdown = 3;
    var cdinterval = setInterval(function(){

        $('#textCountdown').show();
        $('#textCountdown').text(countdown.toString());
        countdown -= 1;

        if(countdown < 0){
            $('#textCountdown').text("你好吗？");
            clearInterval(cdinterval);
            faceDetect();
        }

    },1000)
}

$("#startButton").on('click', function () {
    countdown();
    $('.vjs-fullscreen-control').click();
    $("#startButton").hide();
});


(function ($) {
        $(document).ready(function () {

            // An example of playing with the Video.js javascript API
            // Will start the video and then switch the source 3 seconds latter
            // You can look at the doc there: http://docs.videojs.com/docs/guides/api.html
            videojs('video').ready(function () {
                myPlayer = this;
                
                myPlayer.on('play', function () {
                    console.log('开始/恢复播放');
                });
                myPlayer.on('pause', function () {
                    console.log('暂停播放');
                });
                myPlayer.on('ended', function () {
                    console.log('结束播放');

                    myPlayer.src({
                        type: 'video/mp4',
                        src: defaultVideo//http://localhost:8080/video/1.mp4'
                    });
                    myPlayer.play();

                    countdown();
                });


                myPlayer.src({type: 'video/mp4', src: defaultVideo});
                myPlayer.play();

            });

        });
    })(jQuery);


    var overlay= document.getElementById('overlay');
    var video= document.getElementById('video');
      video.addEventListener('progress', function() {
        var show= video.currentTime>=5 && video.currentTime<10;
        //overlay.style.visibility= show? 'visible' : 'visible';
      }, false);




</script>
</body>
</html>